<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>管理界面</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="shortcut icon" href="#">
    <script src="js/jquery-3.5.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script>
        // 向tbody中添加内容
        function showTbody(index, student) {
            var idTD = $("<td></td>").append(student.id);
            var realnameTD = $("<td></td>").append(student.realname);
            var usernameTD = $("<td></td>").append(student.username);
            var telTD = $("<td></td>").append(student.tel);
            var emailTD = $("<td></td>").append(student.email);
            var collegeTD = $("<td></td>").append(student.college);
            var registerDateTD = $("<td></td>").append(student.registerDate);
            // var btn1 = $("<button id='view' class='btn btn-info btn-xs'>查看</button>").attr("value", student.id);
            var btn1 = $("<a id='view' class='btn btn-info btn-xs'>查看</a>").attr("href", "view.jsp?id=" + student.id);
            var btn2 = $("<a id='modify' class='btn btn-info btn-xs' onclick='return confirm(\"确认修改该生信息？\")'>修改</a>").attr("href", "modify.jsp?id=" + student.id);
            var btn3 = $("<a id='delete' class='btn btn-info btn-xs' onclick='return confirm(\"确认删除该生信息？\")'>删除</a>").attr("href", "deleteServlet?id=" + student.id);
            var btnTd = $("<td></td>").append(btn1, " ", btn2, " ", btn3);
            var tr = $("<tr></tr>").append(idTD, realnameTD,
                usernameTD, telTD, emailTD, collegeTD, registerDateTD, btnTd);
            $("table>tbody").append(tr);
        }

        $(function () {
            $.ajax({
                type: "GET",
                date: null,
                url: "manageInit",
                dataType: "json",
                success: function (json) {
                    $("#num").text(json.length);
                    $.each(json, function (index, student) {
                        showTbody(index, student);  // 向tbody中添加内容
                    });
                    $("#register").click(function () {
                        window.location.href = "register.jsp";
                    })
                    $("#logout").click(function () {
                        if (confirm("您确定要退出吗？"))
                            window.location.href = "login.html";
                    });
                }
            });

            $("#find").click(function () {
                $.post(
                    "findProcess",      // 参数1：url
                    {
                        searchText: $("#searchText").val()
                    },   // 参数2：传递的数据
                    function (json) { // 参数3：回调函数
                        // alert(json + " " + json.length);
                        if (json.length == 0) {
                            alert("未查询到学生信息，请重新输入...");
                            $("#searchText").val("");
                        } else {
                            $("#num").text(json.length);
                            $("tbody").empty();     // 清空tbody中的内容
                            $.each(json, function (index, student) {
                                showTbody(index, student);  // 向tbody中添加内容
                            })
                        }
                    }
                )
            })

            $("#clear").click(function () {
                $("#searchText").val("");
            });
        })
    </script>
</head>
<body>

<div class="container">
    <div class="panel panel-primary">

        <div class="panel-heading">
            <h1 class="text-center">学生信息管理系统</h1>
        </div>

        <div class="panel-body">

            <div class="form-group">
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="searchText" name="searchText" placeholder="输入关键字查询...">
                </div>
                <button type="button" class="btn btn-info" id="find">查找</button>
                <button type="button" class="btn btn-info" id="clear">清空</button>
                <p class="text-right text-info">成功查询到 <strong id="num"></strong> 个学生的信息</p>
<%--                <button type="button" style="float: right" class="btn btn-info">成功查询到 <strong id="num"></strong> 个学生的信息</button>--%>
                <%--<div class="col-lg-offset-8 alert alert-info alert-dismissible" role="alert">
                    <button type="button" class="close fade in" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    成功查询到 <strong id="num"></strong> 个学生的信息
                </div>--%>
            </div>

            <table class="table table-striped text-center">
                <thead>
                    <tr>
                        <th class="text-center">学号</th>
                        <th class="text-center">姓名</th>
                        <th class="text-center">用户名</th>
                        <th class="text-center">手机号</th>
                        <th class="text-center">邮箱</th>
                        <th class="text-center">所在学院</th>
                        <th class="text-center">注册时间</th>
                        <th class="text-center">操作</th>
                    </tr>
                </thead>

                <tbody>

                </tbody>
            </table>

            <div class="form-group text-center">
                <button type="button" class="btn btn-info" id="register">注册</button>
                <button type="button" class="btn btn-info" id="logout">退出</button>
            </div>
        </div>
    </div>
</div>
</body>

</html>